import React, { Component } from 'react'
import Header from "../../components/Header/Header"
import { Form, Input,Button } from 'antd-mobile'
import { getUser,actions } from '../../store/modules/register';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

export class Register extends Component {
  render() {
    let {
      user,
      register:{changeUser,reqregister},
      history:{push}
    } = this.props;
    return (
      <div className='register'>
        <Header text="注册" back></Header>
        {JSON.stringify(user)}
         <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' clearable
            onChange={e=>changeUser(e,"phone")} />
          </Form.Item>
          <Form.Item label='昵称' name='nickname'>
            <Input placeholder='请输入昵称' clearable 
            onChange={e=>changeUser(e,"nickname")}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password'
            onChange={e=>changeUser(e,"password")} />
          </Form.Item>
          <Button block color='primary' size='large'
          onClick={()=>reqregister(push)}>
          注册
        </Button>
        </Form>
      </div>
    )
  }
}

const mapStartToProps = (state) =>({
  user:getUser(state),
});
const mapDispatchToProps = (dispatch) =>{
  return{
    register:bindActionCreators(actions,dispatch),
  };
};

export default connect(mapStartToProps,mapDispatchToProps)(Register);
